<template>
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-media" v-for="item in list" :key="item.id">
			<router-link :to="'/home/newsinfo/'+item.id">
				<!-- src、key,to属性要绑定 相应的item数据-->
				<img class="mui-media-object mui-pull-left" :src="item.url">
				<div class="mui-media-body">
					{{item.title}}
					<p class='mui-ellipsis'>
						<span>发表时间:{{item.add_time|dateFormat}}</span>
						<span>点击：{{item.click}}次</span>
					</p>
				</div>
			</router-link>
		</li>
	</ul>
</template>

<script>
	export default{
		data(){
			return{
				list:[]
			}
		},
		created(){
			this.getNewslist();
		},
		methods:{
			
			getNewslist:function(){
				this.axios.get('http://localhost:3000/api/getNewslist')
				.then((response) => {
					for(var i=0;i<response.data.data.length;i++){
						
						this.list.push({id:response.data.data[i].id,
						title:response.data.data[i].title,
						add_time:response.data.data[i].add_time,
						click:response.data.data[i].click,
						url:response.data.data[i].url,
						content:response.data.data[i].content,
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mui-table-view{
		li{
			.mui-ellipsis{
				font-size: 12px;
				color: #226aff;
				// 项目位于各行之间留有空白的容器内。
				justify-content: space-between;
				display: flex;
			}
		}
	}
</style>
